<template>
  <div>
    <el-dialog
      title="修改用户"
      :visible.sync="visible"
      width="40%"
      @close="editDialogClosed"
      :show="show"
    >
      <!-- 内容主体 -->
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="70px"
      >
        <el-form-item label="用户名">
          <el-input v-model="editForm.username" clearable disabled></el-input>
        </el-form-item>
        <!-- <el-form-item label="密码" prop="password">
          <el-input v-model="editForm.password" clearable></el-input>
        </el-form-item> -->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="editForm.mobile" clearable></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogClosed">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'EditUser',
  props: {
    show: { type: Boolean, default: false },
    // bindObj: { type: Object },
    id: { type: Number }
  },
  data() {
    // 验证邮件
    var checkEmail = (rule, value, callback) => {
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      console.log('check email')
      if (regEmail.test(value)) {
        return callback()
      }
      callback(new Error('邮箱格式不正确'))
    }
    // 验证手机号
    var checkPhone = (rule, value, callback) => {
      const regPhone = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      console.log('check phone')
      if (regPhone.test(value)) {
        return callback()
      }
      callback(new Error('手机号码不正确'))
    }
    return {
      // 控制修改用户对话框
      visible: this.show,
      editForm: {},
      editFormRules: {
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'change' }],
        // mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' }]
        mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: checkPhone, trigger: 'change' }]
      }
    }
  },
  watch: {
    show() {
      this.visible = this.show
    },
    id() {
      // this.editForm = this.bindObj
      console.log('watch', this.id)
      if (this.visible) {
        // debugger
        this.getEditUser(this.id)
      }
    }
  },
  created() {
    console.log('EditUser created...', this.show)
  },
  mounted() {
    // console.log('EditUser mounted...', this.show, this.bindObj.id)
    // if (this.show) {
    //   debugger
    //   // getEditUser(this.id)
    //   this.getEditUser(this.id).then(data => {
    //     const { data: res } = data
    //     console.log(res)
    //     if (res.meta.status !== 200) {
    //       this.editDialogVisible = false
    //       return this.$message.error(res.meta.msg)
    //     }

    //     this.$message.success(res.meta.msg)
    //     this.editDialogVisible = true
    //     // 保存数据对象到窗口
    //     this.editForm = res.data
    //   })
    // }
  },
  updated() {
    console.log('EditUser updated...', this.show, this.id)
  },
  destroyed() {
    console.log('EditUser destroyed...')
  },
  methods: {
    async getEditUser(id) {
      console.log(id)
      // this.editDialogVisible = !this.editDialogVisible
      const { data: res } = await this.$http.get('users/' + id)
      console.log(res)
      if (res.meta.status !== 200) {
        this.visible = false
        return this.$message.error(res.meta.msg)
      }
      this.$message.success(res.meta.msg)
      this.visible = true
      console.log(res.data)
      // 保存数据对象到窗口
      this.editForm = res.data
    },
    edit() {
      this.$refs.editFormRef.validate(async valid => {
        // debugger
        console.log(valid)
        if (!valid) { return '' }
        // 修改数据的网络请求
        console.log('修改用户网络请求', this.editForm.id, this.editForm.email, this.editForm.mobile)
        console.log(this.editForm)
        // this.$emit('postEditUser', this.editForm)
        const { data: res } = await this.$http.put('users/' + this.editForm.id,
          { email: this.editForm.email, mobile: this.editForm.mobile })
        console.log(res)
        if (res.meta.status !== 200) { return this.$message.error(res.meta.msg) }
        this.$message.success(res.meta.msg)
        this.visible = false
        this.$emit('getUserList')
      })
    },
    editDialogClosed() {
      // this.$refs.editFormRules.resetFields()
      // $emit(update:prop, 'newProValue') 表示子组件向父组件传达更新属性值
      this.$emit('update:show', false)
    }
  }
}
</script>
